<script setup>
import { ref, reactive } from "vue";
import dayjs from "dayjs"
// import { useI18n } from "vue-i18n"
import Header from "@/components/Header.vue"
import { getAssets } from "@/api"

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const state = reactive({
    page: 0,
    size: 20,
    begin_date: '',
    end_date: ''
})
const onLoad = () => {
    console.log(1)
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    getAssets(state).then(res => {
        list.value = [
            ...list.value,
            ...res.content
        ]
        state.page += 1;
        loading.value = false;
        if (list.value.length >= res.total) {
            finished.value = true;
        }

        console.log(finished.value)

    })

};
</script>

<template>
    <Header :title="$t('Detailed Bills')"></Header>
    <div class="mx-2 mt-2">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="list.length > 10 ? $t('No more') : ''"
            :loading-text="$t('Loading...')" @load="onLoad">
            <div class="flex justify-between p-1 border-b text-[16px] items-center" v-for="item in list" :key="item">
                <div>
                    <div class=" mb-[4px]">{{ dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    <div class="text-red-500 rounded-full bg-[#1E88FF] text-[12px] py-[2px] px-[10px]"
                        style="max-width: fit-content;">{{
        item.remark }}</div>
                </div>
                <div class="text-black font-medium ">${{ item.amount }}</div>
            </div>

        </van-list>
        <van-empty :description="$t('No more')" v-if="!loading && list.length == 0" />
    </div>
    <div class="h-1 mb-6"></div>

</template>
